<template>
	<view>
		<view class="broadcast_top">
			<view class="broadcast_user">
				<image class="user_left" :src="liveInfo.avatarUrl" />
				<view class="user_right">
					<text class="user_r_top">
						{{ liveInfo.title || "默认直播间" }}
					</text>
					<view class="user_r_bot">
						<image class="bot_img" src="@/static/zhibo/xin.png" />
						<text class="bot_title">
							{{ liveInfo.hot }}
						</text>
					</view>
				</view>
			</view>
			<view class="broadcast_info">
				<view class="info_left">
					<view class="info_left" v-if="topInfo.length > 0">
						<view v-for="(item,index) in topInfo" :key="index">
							<image class="info_avatar" @tap="openManage(item)" :src="item.avatarUrl" />
						</view>
					</view>
				</view>
			<text class="info_mid fs-26" @tap="openGz"  >
				{{ num }}
			</text>
					<image @click="goBack" class="back info_mids fs-26"  style="margin-left: 5rpx;"  src="@/static/zhibo/guanbi1.png" />
		<!-- 	<text class="info_mids fs-26" style="margin-left: 5rpx;" @tap="goBack" >
							<image @click="goBack" class="back" src="@/static/zhibo/guanbi1.png" />
			</text> -->

			</view>
		</view>
		<view v-if="isFlag">
			<!-- 连麦遮罩层 -->
			<view class="on_line_mask" @tap="close" />
			<view class="on_line">
				<view class="on_line_top">
					<text class="on_line_title">
						观众列表1112
					</text>
					<text class="on_line_edit" @tap="close">
						<image class="back_xx" @tap="close" src="@/static/zhibo/guanbi.png" />
					</text>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y Invite">
					<view class="Invite_item" v-for="(item, index) in info" :key="index">
						<view class="Invite_item_l" @tap="openManage(item)">
							<view class="m-20">
								<image v-if="index === 0" class="mg" src="@/static/live/one.png" mode="scaleToFill" />
								<image v-if="index === 1" class="mg" src="@/static/live/two.png" mode="scaleToFill" />
								<image v-if="index === 2" class="mg" src="@/static/live/three.png" mode="scaleToFill" />
							</view>
							<text :class="index <= 2 ? 'Invite_num' : 'Invite_W_num'">
								{{ index + 1 }}
							</text>
							<image class="Invite_item_img" :src="item.avatarUrl" />
							<text class="fs-30">
								{{ item.nickname }}
							</text>
						</view>
					</view>
				</scroll-view>
				<view class="bot">
					<view class="Invite_item">
						<view class="Invite_item_l">
							<text class="m-20">

							</text>
							<image class="Invite_item_img" :src="userInfo.avatarUrl" />
							<text class="fs-30">
								{{ userInfo.nickName }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 主播选择观众浮层 -->
		<view class="interaction_layer" v-if="isInter">
			<view class="interaction">
				<image class="inter_avatar" :src="hd_user.avatarUrl" />
				<view class="inter_name"> <text style="font-size: 30rpx;color: #fff;">{{hd_user.nickName}}</text> </view>
				<image class="inter_xx" @click="closeInter" src="@/static/zhibo/guanbi.png" />
				<view class="interaction_btn">
					<view class="inter_an"><text style="font-size: 30rpx;color: #fff;" @click="getProh">{{hd_user.is_jinyan==1?'取消禁言':'禁言'}}</text></view>
					<view class="inter_an"><text style="font-size: 30rpx;color: #fff;" @click="getTi">踢出直播间</text></view>
					<!-- <view class="inter_an"><text style="font-size: 30rpx;color: #fff;">拉黑</text></view> -->
				</view>
				<view class="interaction_btn">
					<view class="lmbtn"><text style="font-size: 30rpx;color: #fff;" @click="getlm">视频连线</text></view>
					<view class="lmbtn"><text style="font-size: 30rpx;color: #fff;" @click="getlm">语音连麦</text></view>
				</view>
			</view>
		</view>
		<!-- 申请连麦 -->
		<!-- <view class="lm_layer">
			
		</view> -->
		<view class="lmbg" v-if="isLm">
			<image class="lmhead" :src="liveInfo.avatarUrl" />
			<view class="lmname"> <text style="font-size: 30rpx;">{{liveInfo.title}}</text> </view>
			<view class="lmbtom">
				<view class="zblm"><text style="font-size: 30rpx;color: #999;" @click="getJujue()">暂不连麦</text></view>
				<view class="sqlm"><text style="font-size: 30rpx;color: #fff;" @click="getJies()">接受连麦</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	
	export default {
		props: {
			'room_id':{
				type:String,
				default:''
			},
			'live_data': {
				type: Object,
				default: {}
			},
			'avatarUrl': {
				type: String,
				default: ''
			},
			'page_name': {
				type: String,
				default: ''
			},
		},
		mounted() {
			var that = this
			uni.$on('WsMessage', function(res) {
				that.WsMessage(res)
			})
			uni.$api.live.getLiveUrl({
				streamName:this.room_id
			
			}).then(res=>{	
			})
		
				
			
			this.userInfo = uni.getStorageSync('userInfo')
		},
		onHide() {
			this.endBroadcast()
		},
		data() {
			return {
				num: 0,
				love: 0,
				topInfo: [],
				isFlag: false,
				info: [],
				userInfo: [],
				liveInfo:{
					title:'默认',
					hot:'0',
					avatarUrl:''
				},
				isInter:false,//观众列表浮层
				identity:"",//身份
				hd_user:"",
				isLm:false,//连麦浮层
				zhubo_id:""
			}
		},
		methods: {
			WsMessage(data) {
				console.log(data.type,'监听参数')
				switch (data.type) {
					case 'ping':
						break;
					case 'getGroupInfo':
						this.liveInfo.hot = data.hot
						this.liveInfo.title = data.title
						this.liveInfo.avatarUrl = data.avatarUrl
						this.liveInfo.id = data.id
						this.num = data.num
						this.topInfo =  data.topInfo
						this.identity = data.identity
						this.zhubo_id=data.uid
						break;
					case 'tichu':
						console.log("你已被踢出直播间");
						const res = uni.$api.live.user_out({
							live_id: this.room_id,
						})
						if (res) {
							uni.showToast({
								title: '你已被踢出直播间'
							});
						}
						break;
					case 'yqlm':
						this.isLm = true
						break;
					case 'userconfirm':
					//用户接受连麦
						this.$emit("yhjslm", data)
						uni.setStorageSync('hun',data)
						break;
				}
			},
			open(data) {
				this.$emit("openApply", data)
			},
			initPlayer(data) {
				// console.log('z1')
				// this.updateLivePlayNowType(true)
				this.$emit("initPlayer", data)
			},
			
			goBack(data) {
				// this.$emit("stopPlay", data)
				if (this.page_name === 'living') {
					this.endUserEdit()
				} else {
					this.endBroadcast()
				}
			},
			openManage(val) {
				if(this.userInfo.id==this.identity){
					this.isFlag = false
					this.$emit("showTab")
					this.isInter = true
					this.hd_user = val
				}
			},
			//用户退出直播
			endUserEdit() {
				const self = this

				uni.showModal({
					title: '提示',
					content: '是否退出直播间',
					success: async function(res) {
						if (res.confirm) {
							const res = await uni.$api.live.user_out({
								live_id: self.room_id,
							})
							
							// uni.showModal({
							// 	content:JSON.stringify(res)
							// })
							self.$emit("stopPlay")
							if (res) {
								uni.$util.goUrl({
									url: `/pages/live`
								})
							}
						} else if (res.cancel) {
						}
					}
				});
			},
			//结束直播
			endBroadcast() {
				const self = this
				console.log('主播退出');
				
				uni.showModal({
					title: '提示',
					content: '是否退出直播',
					success: async function(res) {
						if (res.confirm) {
							const live_data = uni.getStorageSync("live_data")
							const res = await uni.$api.user['endBroadcast']({
								live_id: live_data.id,
							})
							if (res) {
								self.$emit("goBacks")
								self.$emit("stopPlay")
								// console.log(res, '结束直播'); // 打印响应数据
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			openGz() {
				this.$emit("closeTab")
				this.$emit("openOperation")
				this.isFlag = true
				this.audience()
			},
			close() {
				this.$emit("showTab")
				this.$emit("closeOperation")
				this.isFlag = false
			},
			closeInter(){
				this.isInter =false
				this.$emit("showTab")
			},
			//在线观众
			async audience() {
				const res = await uni.$api.user['audience']({
					live_id: this.room_id,
					page: 0,
					limit: 200
				})
				if (res) {
					this.info = res
				}
			},
			// 踢出直播间
			async getTi(){
				const res = await uni.$api.user['outZhi']({
					live_id:this.liveInfo.id,
					user_id:this.hd_user.id,
					status:3
				})
				console.log(res)
				if(res){
					this.isInter =false
					this.$emit("showTab")
				}
			},
			getProh(){
				console.log('禁言')
				if(this.hd_user.is_jinyan==1){
					// 取消禁言
					uni.request({
						url:'https://same.ascetic.top/index.php?i=666&m=longbing_massages_city&s=api/app/Live/SetUserStatus&urls=api/app/Live/SetUserStatus',
						data:{
							live_id:this.liveInfo.id,
							user_id:this.hd_user.id,
							status:2
						},
						method: 'POST',
						header:{
							autograph:uni.getStorageSync('autograph')
						},
						success: (res) => {
							console.log(res)
							this.isInter =false
							this.$emit("showTab")
						}
					})
				}else if(this.hd_user.is_jinyan==0) {
					// 禁言
					uni.request({
						url:'https://same.ascetic.top/index.php?i=666&m=longbing_massages_city&s=api/app/Live/SetUserStatus&urls=api/app/Live/SetUserStatus',
						data:{
							live_id:this.liveInfo.id,
							user_id:this.hd_user.id,
							status:1
						},
						method: 'POST',
						header:{
							autograph:uni.getStorageSync('autograph')
						},
						success: (res) => {
							console.log(res)
							this.isInter =false
							this.$emit("showTab")
						}
					})
				}
			},
			// 连麦
			async getlm(){
				const self = this
				const res = await uni.$api.live['getLianmai']({
					live_id:self.liveInfo.id,
					user_id:self.hd_user.id,
				})
				console.log(res)
				if(res){
					self.isInter =false
					self.$emit("showTab")
				}
			},
			//接受连麦
			async getJies(){
				const self = this
				const res = await uni.$api.live['getUserConfirmLink']({
					live_id:self.liveInfo.id,
					zhu_id:self.zhubo_id,
				})
				console.log(res)
				if(res){
					self.isLm =false
					self.$emit("showTab")
					self.$emit("jieshou", 1)
				}
				
			},
			//拒绝连麦
			async getJujue(){
				const self = this
				const res = await uni.$api.live['getUserCancelLink']({
					live_id:self.liveInfo.id,
					zhu_id:self.zhubo_id,
				})
				console.log(res)
				if(res){
					self.isLm =false
					self.$emit("showTab")
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.fs-26 {
		font-size: 26rpx;
	}

	.m-20 {
		width: 80rpx;
		height: 80rpx;
		margin: 0 20rpx 0 40rpx
	}

	.mg {
		width: 80rpx;
		height: 80rpx;
	}

	//顶部
	.broadcast_top {
		position: fixed;
		top: 100rpx;
		left: 30rpx;
		width: 680rpx;
		height: 76rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.Invite_num {
		position: absolute;
		top: 40rpx;
		left: 70rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.Invite_W_num {
		position: absolute;
		top: 40rpx;
		left: 70rpx;
		font-size: 24rpx;
	}

	.broadcast_user {
		width: 270rpx;
		height: 76rpx;
		border-radius: 45rpx;
		display: flex;
		flex-direction: row;
		padding: 5rpx;
		background-color: $uni-bg-color-mask;
	}

	.user_left {
		height: 66rpx;
		width: 66rpx;
		border-radius: 45rpx;
	}

	.user_right {
		width: 170rpx;
		height: 76rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: column;
	}

	.user_r_top {
		color: #fff;
		width: 180rpx;
		height: 42rpx;
		line-height: 42rpx;
		font-size: 20rpx;
		white-space: nowrap;
		overflow: hidden; //溢出隐藏
		text-overflow: ellipsis; //超出部分省略号
		white-space: nowrap; //不换行
	}

	.user_r_bot {
		height: 24rpx;
		width: 180rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.bot_img {
		height: 20rpx;
		width: 20rpx;
	}

	.bot_title {
		margin-left: 10rpx;
		font-size: 22rpx;
		color: #fff;
	}

	.broadcast_info {
		width: 350rpx;
		height: 76rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.info_left {
		width: 200rpx;
		height: 76rpx;
		display: flex;
		flex-direction: row;
		justify-content: end;
		align-items: center;
	}

	.info_mid {
		width: 90rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color: #fff;
		border-radius: 45rpx;
		background-color: $uni-bg-color-mask;
		// background: #000;
	}
	
	.info_mids {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #fff;
		border-radius: 45rpx;
		background-color: $uni-bg-color-mask;
	}

	.info_right {
		width: 50rpx;
		height: 76rpx;
		line-height: 76rpx;
		color: #fff;
		text-align: center;
	}

	.info_avatar {
		height: 60rpx;
		width: 60rpx;
		background-color: rgb(35, 54, 223);
		border-radius: 45rpx;
	}

	.back {
		margin-left: 20rpx;
		width: 31rpx;
		height: 31rpx;
	}

	//语音连麦
	.on_line {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 800rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.on_line_mask {
		width: 750rpx;
		height: 730rpx;
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 1000;
	}

	.on_line_top {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.on_line_title {
		width: 650rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.on_line_edit {
		color: rgb(185, 184, 188);
	}

	.Invite {
		height: 580rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}

	.bot {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		width: 750rpx;
	}

	.Invite_item {
		height: 125rpx;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.Invite_item_l {
		width: 550rpx;
		height: 125rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.Invite_item_img {
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		margin-right: 25rpx;
	}

	.Invite_btn {
		width: 120rpx;
		height: 55rpx;
		border-radius: 45rpx;
		color: #fff;
		line-height: 55rpx;
		text-align: center;
		background: linear-gradient(to right, #4fb784, #a4d79f);
	}
	.interaction_layer{
		width: 750rpx;
		height: 1200rpx;
		// background: #000;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: flex;
		align-items: flex-end;
		flex-direction: column-reverse;
	}
	.interaction{
		width: 750rpx;
		height: 580rpx;
		background: #1A191E;
		border-radius: 30rpx;
		position: relative;
	}
	.interaction_btn{
		display: flex;
		flex-direction: row;
		padding: 0 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
		margin-top: 50rpx;
		
	}
	.inter_an{
		width: 218rpx;
		height: 82rpx;
		background: #2A292E;
		border-radius: 41rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.inter_avatar{
		width: 148rpx;
		height: 148rpx;
		border-radius: 50%;
		position: fixed;
		top: 550rpx;
		left: 300rpx;
	}
	.inter_name{
		width: 750rpx;
		font-size: 30rpx;
		color: #fff;
		padding-top: 124rpx;
		display: flex;
		align-items: center;
	}
	.back_xx{
		width: 30rpx;
		height: 30rpx;
	}
	.inter_xx{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 42rpx;
		top: 42rpx;
	}
	.lmbtn{
		width: 331rpx;
		height: 160rpx;
		background: #2A292E;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.lmbg{
		width: 540rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		z-index: 1000;
		position: fixed;
		top: 500rpx;
		left: 105rpx;
	}
	.lmhead{
		width: 148rpx;
		height: 148rpx;
		border-radius: 50%;
		position: fixed;
		left: 300rpx;
		top:426rpx
	}
	.lmname{
		width: 540rpx;
		padding-top: 102rpx;
		display: flex;
		justify-content: center;
		flex-direction: row;
	}
	.lmbtom{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 45rpx;
		padding: 0 40rpx;
	}
	.zblm{
		width: 220rpx;
		height: 82rpx;
		background: #E5E5E5;
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.sqlm{
		width: 220rpx;
		height: 82rpx;
		background: linear-gradient(90deg, #A4D79F, #4FB784);
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>